import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_project/common/utils/screen_size_utils.dart';
import 'package:flutter_project/config/theme_color.dart';

class SearchHomePage extends StatefulWidget {
  const SearchHomePage({super.key});

  @override
  State<SearchHomePage> createState() => _SearchHomePageState();
}

class _SearchHomePageState extends State<SearchHomePage>
    with WidgetsBindingObserver {
  TextEditingController textEditingController = TextEditingController();
  FocusNode focusNode = FocusNode();
  double imgWidth = 100;
  double imgHeight = 120;
  ValueNotifier<double> keyboardHeight = ValueNotifier(0.0);

  List<String> placeList = ['西游记', '红楼梦', '水浒传', '三国演义'];

  late Timer timer;

  ValueNotifier<int> currentIndex = ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: UnconstrainedBox(
          child: GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Image.asset(
              'assets/images/left_back_arrow.png',
              width: 16,
              color: Colors.black,
            ),
          ),
        ),
        title: Container(
          width: 240,
          height: 35,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            color: ThemeColor.sendMsgColor,
          ),
          child: Row(
            children: [
              const SizedBox(
                width: 10,
              ),
              Icon(
                Icons.search_rounded,
                color: ThemeColor.textColorSecond,
              ),
              Expanded(
                child: ValueListenableBuilder(
                    valueListenable: currentIndex,
                    builder: (BuildContext context, int value, Widget? child) {
                      return TextField(
                        focusNode: focusNode,
                        controller: textEditingController,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: placeList[value],
                          isCollapsed: true,
                          hintStyle:
                              TextStyle(color: ThemeColor.checkNormalColor),
                        ),
                      );
                    }),
              )
            ],
          ),
        ),
        actions: [
          GestureDetector(
            onTap: () {
              cancelFocusNode();
            },
            child: Container(
              padding: const EdgeInsets.only(right: 15),
              child: const Text(
                '搜索',
                style: TextStyle(color: Colors.red),
              ),
            ),
          )
        ],
      ),
      body: Stack(
        children: [
          Container(
            color: ThemeColor.mainBgColor,
            margin: const EdgeInsets.only(top: 10),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  const Row(
                    children: [
                      Text('狂飙2'),
                      Text('你们都追了'),
                    ],
                  ),
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Wrap(
                      direction: Axis.horizontal,
                      children: [
                        const SizedBox(
                          width: 20,
                        ),
                        getItem(),
                        const SizedBox(
                          width: 20,
                        ),
                        getItem(),
                        const SizedBox(
                          width: 20,
                        ),
                        getItem(),
                        const SizedBox(
                          width: 20,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          ValueListenableBuilder(
              valueListenable: keyboardHeight,
              builder: (BuildContext context, double value, Widget? child) {
                return Visibility(
                  visible: value > 0,
                  child: Positioned(
                      bottom: 13.0,
                      width: 140,
                      left: (ScreenSizeUtils.deviceScreenWidth(context) - 140) /
                          2.0,
                      child: GestureDetector(
                          onTap: () {},
                          child: Container(
                            padding: const EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(30),
                              color: ThemeColor.mainBgColor,
                            ),
                            child: const Row(
                              children: [
                                Icon(Icons.mic),
                                Text(
                                  '按住 说话',
                                  style: TextStyle(fontWeight: FontWeight.bold),
                                )
                              ],
                            ),
                          ))),
                );
              }),
        ],
      ),
    );
  }

  Widget getItem() {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12), color: Colors.blue),
      child: Column(
        children: [
          const Text(
            '短剧热搜榜',
            style: TextStyle(
                fontSize: 18, fontWeight: FontWeight.bold, color: Colors.red),
          ),
          Row(
            children: [
              Container(
                width: 50,
                height: 70,
                decoration: const BoxDecoration(color: Colors.grey),
              ),
              const SizedBox(
                width: 10,
              ),
              const Text(
                '闪婚后年下总裁狠狠爱',
                style: TextStyle(fontWeight: FontWeight.w600),
              )
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Container(
                width: 50,
                height: 70,
                decoration: const BoxDecoration(color: Colors.grey),
              ),
              const SizedBox(
                width: 10,
              ),
              const Text(
                '全球强者欠我赊刀债',
                style: TextStyle(fontWeight: FontWeight.w600),
              )
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Container(
                width: 50,
                height: 70,
                decoration: const BoxDecoration(color: Colors.grey),
              ),
              const SizedBox(
                width: 10,
              ),
              const Text(
                '全球强者欠我赊刀债',
                style: TextStyle(fontWeight: FontWeight.w600),
              )
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Container(
                width: 50,
                height: 70,
                decoration: const BoxDecoration(color: Colors.grey),
              ),
              const SizedBox(
                width: 10,
              ),
              const Text(
                '全球强者欠我赊刀债',
                style: TextStyle(fontWeight: FontWeight.w600),
              )
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Container(
                width: 50,
                height: 70,
                decoration: const BoxDecoration(color: Colors.grey),
              ),
              const SizedBox(
                width: 10,
              ),
              const Text(
                '全球强者欠我赊刀债',
                style: TextStyle(fontWeight: FontWeight.w600),
              )
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Container(
                width: 50,
                height: 70,
                decoration: const BoxDecoration(color: Colors.grey),
              ),
              const SizedBox(
                width: 10,
              ),
              const Text(
                '全球强者欠我赊刀债',
                style: TextStyle(fontWeight: FontWeight.w600),
              )
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Container(
                width: 50,
                height: 70,
                decoration: const BoxDecoration(color: Colors.grey),
              ),
              const SizedBox(
                width: 10,
              ),
              const Text(
                '全球强者欠我赊刀债',
                style: TextStyle(fontWeight: FontWeight.w600),
              )
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Container(
                width: 50,
                height: 70,
                decoration: const BoxDecoration(color: Colors.grey),
              ),
              const SizedBox(
                width: 10,
              ),
              const Text(
                '全球强者欠我赊刀债',
                style: TextStyle(fontWeight: FontWeight.w600),
              )
            ],
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    if (focusNode.hasFocus == false) {
      focusNode.requestFocus();
    }
    WidgetsBinding.instance.addObserver(this);
    timer = Timer.periodic(const Duration(seconds: 3), (timer) {
      setState(() {
        currentIndex.value = (currentIndex.value + 1) % placeList.length;
      });
    });
  }

  void cancelFocusNode() {
    if (focusNode.hasFocus) {
      focusNode.unfocus();
    }
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      if (mounted) {
        final double newKeyBoardHeight =
            MediaQuery.of(context).viewInsets.bottom;
        keyboardHeight.value = newKeyBoardHeight;
      }
    });
  }

  @override
  void dispose() {
    cancelFocusNode();
    WidgetsBinding.instance.removeObserver(this);
    if (timer.isActive) {
      timer.cancel();
    }
    super.dispose();
  }
}
